﻿@{
    ViewBag.Title = "MembersForm";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<script>
    var keyValue = $.request("keyValue");
    var pridata;
    var DLdata =
    $(function () {
        initControl();
        if (!!keyValue) {
            $.ajax({
                url: "/SystemManage/User/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#form1").formSerialize(data);
                    $("#F_UserPassword").val("******").attr('disabled', 'disabled');
                }
            });
        }
    });
    function initControl() {
         $("#F_Province").bindSelect({
            url: "/SystemManage/Area/GetProviceJson",
            id: "F_Id",
            text: "F_FullName",
            loadsuccess:function(data){
                pridata=data;
                data.unshift({'F_Id':'','F_FullName':'===请选择==='});
            },
            change:function(){
                $("#F_City").val(null);
                $("#F_City").empty();
                var b=$("#F_Province").val();
                $("#F_City").bindSelect({
                    url: "/SystemManage/Area/GetCityJson?ProId="+b,
                    id: "F_Id",
                    text: "F_FullName",
                    loadsuccess:function(data){
                        data.unshift({'F_Id':'','F_FullName':'===请选择==='});
                    },
                    change:function(){
                        $("#F_Area").val(null);
                        $("#F_Area").empty();
                        var c=$("#F_City").val();
                        $("#F_Area").bindSelect({
                            url: "/SystemManage/Area/GetAreaJson?City="+c,
                            id: "F_Id",
                            text: "F_FullName",
                            loadsuccess:function(data){
                                data.unshift({'F_Id':'','F_FullName':'===请选择==='});
                            }
                        });
                    }
                });
            }
        });
        $("#F_City").bindSelect();
        $("#F_Area").bindSelect();

    function setdefultText(id){
        $("#"+id).bindSelect({
            id: "F_Id",
            text: "F_FullName",
            data: [{'F_Id':'','F_FullName':'===请选择==='}]
        });
    }

    function ProxyTypeChange(newsel){
                $("#F_Province1").empty();
                $("#F_City1").empty();
                $("#F_Area1").empty();
                if(newsel.id == 0){
                    setdefultText("F_Province1");
                    setdefultText("F_City1");
                    setdefultText("F_Area1");
                } else if (newsel.id == 1){
                    //setdefultText("F_Province1");
    bindSelectProvince1();
                    setdefultText("F_City1");
                    setdefultText("F_Area1");
                } else if (newsel.id == 2){
                    //setdefultText("F_Province1");
                    bindSelectProvince1();
                    //setdefultText("F_City1");
                    setdefultText("F_Area1");
                } else if (newsel.id == 3){
                    //setdefultText("F_Province1");
    bindSelectProvince1();
                    //setdefultText("F_City1");
                    //setdefultText("F_Area1");
                }
                $("#F_Province1").prop("disabled", newsel.id <1);
                $("#F_City1").prop("disabled", newsel.id <2);
                $("#F_Area1").prop("disabled", newsel.id <3);

    }
    ProxyTypeChange({ id: 0, text: '不是代理' });
        $("#ProxyType").bindSelect({
            id: "id",
            text: "text",
            data: [{ id: 0, text: '不是代理' }, { id: 1, text: '省代理' }, { id: 2, text: '市代理' }, { id: 3, text: '区县代理' }],
            change: function (newsel){
    ProxyTypeChange(newsel);
            }
        });

    function bindSelectProvince1(){

        $("#F_Province1").bindSelect({
            url: "/SystemManage/Area/GetProviceTJson",
            id: "F_Id",
            text: "F_FullName",
            loadsuccess:function(data){
                data.unshift({'F_Id':'','F_FullName':'===请选择==='});
            },
            change:function(){
                $("#F_City1").val(null);
                $("#F_City1").empty();
                var b=$("#F_Province1").val();
                $("#F_City1").bindSelect({
                    url: "/SystemManage/Area/GetCityTJson?ProId="+b,
                    id: "F_Id",
                    text: "F_FullName",
                    loadsuccess:function(data){
                        data.unshift({'F_Id':'','F_FullName':'===请选择==='});
                    },
                    change:function(){
                        $("#F_Area1").val(null);
                        $("#F_Area1").empty();
                        var c=$("#F_City1").val();
                        $("#F_Area1").bindSelect({
                            url: "/SystemManage/Area/GetAreaTJson?City="+c,
                            id: "F_Id",
                            text: "F_FullName",
                            loadsuccess:function(data){
                                data.unshift({'F_Id':'','F_FullName':'===请选择==='});
                            }
                        });
                    }
                });
            }
        });
    }

        $("#F_City1").bindSelect();
        $("#F_Area1").bindSelect();
        $('#wizard').wizard().on('change', function (e, data) {
            var $finish = $("#btn_finish");
            var $next = $("#btn_next");
            if (data.direction == "next") {
                switch (data.step) {
                    case 1:
                        /*if (!$('#form1').formValid()) {
                            return false;
                        }*/
                        var result=checkUser();
                        if(result!=""){
                            $.modalMsg(result,"warning");
                            return false;
                        }
                        result=DoneCheck();
                        if(result!=""){
                            $.modalMsg(result,"warning");
                            return false;
                        }
                        $finish.show();
                        $next.hide();
                        break;
                    default:
                        break;
                }
            } else {
                $finish.hide();
                $next.show();
            }
        });
        gridList();
    }
    function gridList() {
        var $gridList = $("#gridList");
        $gridList.jqGrid({
            url: "/BusinessManage/D_Goods/GetGridJsonenable",
            datatype : "json",
            height: $(window).height() - 146,
            colNames : [ '主键', '商品图片', '商品名称', '商品价格', '商品规格', '商品描述' ],
            colModel: [
                { name: "F_Id", hidden: true, key: true },
                { name: 'F_Pic', index: 'F_Pic', width: 150, align: "center",fixed:true, sortable: false, editable: false, formatter: alarmFormatter },
                { name: 'F_Name',width: 150,align: 'center',fixed:true },
                { name: 'F_Price',width: 100, align: 'center',fixed:true },
                { name: 'F_Spec',width: 150,align: 'center',fixed:true },
                { name: 'F_Summary',width: 430,align: 'center',fixed:true }
            ],
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            sortname : 'F_CreatorTime desc',
            recordpos : 'left',
            viewrecords : true,
            multiselect: true,
            multiboxonly:true,
            beforeSelectRow: beforeSelectRow,
            caption : "商品列表",
            pager: "#gridPager"
        });
    }
    function beforeSelectRow()
    {
        $("#gridList").jqGrid('resetSelection');
        return(true);
    }

    function alarmFormatter(cellvalue, options, rowdata){
        return '<img class="alarmimg" style="max-height:42px;max-width:42px;" src="@Url.Content("~/")'+cellvalue+'" onload="bindEvent(this);" />';
    }

    function bindEvent (el) {
        $(el).mouseenter(function () {
            $('<img class="imgcontent" style="position:absolute;z-index:99;max-width:400px;max-height:400px;margin: auto;left: 0px;right: 0px;top: 0px;bottom: 0px;" />')
                .attr("src", el.src).appendTo("body");
        })
        .mouseleave(function () {
            $(".imgcontent").remove();
        });
    }
    function submitForm() {
        var postData = $("#form1").formSerialize();
        postData["Goods"] = String($("#gridList").jqGrid('getGridParam', 'selarrrow'));
        $.submitForm({
            url: "/SystemManage/User/SubmitMemberForm?keyValue=" + keyValue,
            param: postData,
            success: function () {
                window.location.href = window.location.href;
            }
        });
    }
    function DoneCheck(){
        var t=$("#ProxyType").val();

        if(t=="1"){
            var p=$("#F_Province1").val();
            if(p==""){
                return "请选择要代理的省份";
            }
            $("#ProxyCode").val(p);
        }
        if(t=="2"){
            var c=$("#F_City1").val();
            if(c==""){
                return "请选择要代理的市";
            }
            $("#ProxyCode").val(c);
        }
        if(t=="3"){
            var a=$("#F_Area1").val();
            if(a==""){
                return "请选择要代理的区县";
            }
            $("#ProxyCode").val(a);
        }
        return"";
    }
    function checkUser(){
        var card=$("#F_CardId").val();
        var res=checkIdcard(card);
        if(res!=""){
            return res;
        }
        var v=$("#F_Account").val();
        var numasc = 0;
        var charasc = 0;
        if(0==v.length){
            return "账户不能为空";
        }else if(v.length!=6){
            return "账户长度应为6个字符";
        }else{
            for (var i = 0; i < v.length; i++) {
                var asciiNumber = v.substr(i, 1).charCodeAt();
                if (asciiNumber >= 48 && asciiNumber <= 57) {
                    numasc += 1;
                }
                if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                    charasc += 1;
                }
            }
            if(0==numasc)  {
                return "账户必须含有数字";
            }else if(0==charasc){
                return "账户必须含有字母";
            }
        }

        var P=$("#F_UserPassword").val();
        var P1=$("#F_UserPassword1").val();
        var Pnumasc = 0;
        var Pcharasc = 0;
        if(0==P.length){
            return "登录密码不能为空";
        }else if(P.length<6||P.length>9){
            return "登录密码长度应为长度6-9位";
        }else{
            for (var i = 0; i < P.length; i++) {
                var asciiNumber = P.substr(i, 1).charCodeAt();
                if (asciiNumber >= 48 && asciiNumber <= 57) {
                    Pnumasc += 1;
                }
                if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                    Pcharasc += 1;
                }
            }
            //if(0==Pnumasc)  {
            //    return "登录密码必须含有数字";
            //}
            //else if (0 == Pcharasc) {
            //    return "登录密码必须含有字母";
            //} else
            if (P != P1) {
                return "登录密码两次输入的不一致";
            }
        }

        var S=$("#F_SecPassword").val();
        var S1=$("#F_SecPassword1").val();
        var Snumasc = 0;
        var Scharasc = 0;
        if(0==S.length){
            return "二级密码不能为空";
        }else if(S.length<6||S.length>9){
            return "二级密码长度应为长度6-9位";
        }else{
            for (var i = 0; i < S.length; i++) {
                var asciiNumber = S.substr(i, 1).charCodeAt();
                if (asciiNumber >= 48 && asciiNumber <= 57) {
                    Snumasc += 1;
                }
                if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
                    Scharasc += 1;
                }
            }
            //if(0==Snumasc)  {
            //    return "二级密码必须含有数字";
            //}else if(0==Scharasc){
            //    return "二级密码必须含有字母";
            //} else
            if (S != S1) {
                return "二级密码两次输入的不一致";
            }else{
                var Pro=$("#F_Province").val();
                var Cit=$("#F_City").val();
                var Are=$("#F_Area").val();
                var IdA=$("#F_IdAddress").val();
                if(Pro==""||Pro==null||Cit==""||Cit==null||Are==""||Are==null||IdA==""){
                    return "请输入完整的身份证地址";
                }
                var Add=$("#F_Address").val();
                if(Add==""){
                    return "请输入收货地址";
                }
                var RealN=$("#F_RealName").val();
                if(RealN==""){
                    return "请输入会员姓名";
                }
                return "";
            }
        }
    }

    function checkIdcard(num){
        num = num.toUpperCase();
        //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。
        if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num)))
        {
            return "输入的身份证号长度不对，或者号码不符合规定！\n15位号码应全为数字，18位号码末位可以为数字或X";
        }
        //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
        //下面分别分析出生日期和校验位
        var len, re;
        len = num.length;
        if (len == 15)
        {
            re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
            var arrSplit = num.match(re);
 
            //检查生日日期是否正确
            var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
            var bGoodDay;
            bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
            if (!bGoodDay)
            {
                return "输入的身份证号里出生日期不对！";
            }
            else
            {
                    //将15位身份证转成18位
                    //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
                    var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                    var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                    var nTemp = 0, i;
                    num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
                    for(i = 0; i < 17; i ++)
                    {
                        nTemp += num.substr(i, 1) * arrInt[i];
                    }
                    num += arrCh[nTemp % 11];
                    return "";
            }
        }
        if (len == 18)
        {
            re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
            var arrSplit = num.match(re);
 
            //检查生日日期是否正确
            var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
            var bGoodDay;
            bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
            if (!bGoodDay)
            {
                return "输入的身份证号里出生日期不对！";
            }
        else
        {
            //检验18位身份证的校验码是否正确。
            //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
            var valnum;
            var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
            var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
            var nTemp = 0, i;
            for(i = 0; i < 17; i ++)
            {
                nTemp += num.substr(i, 1) * arrInt[i];
            }
            valnum = arrCh[nTemp % 11];
            if (valnum != num.substr(17, 1))
            {
                return "18位身份证的校验码不正确！应该为："+ valnum;
            }
            return "";
        }
        }
        return "身份证号码有误";
    }

    $(document).ready(function () {
        $("#F_UserPassword,#F_UserPassword1,#F_SecPassword,#F_SecPassword1").val('111111'); //默认设成111111

        $("#F_CardId").on('input', function (e) {
            var inputCardId = $("#F_CardId").val();
            var url = '@Url.Content("~/SystemManage/User/GetUserBaseInfo/")' + inputCardId + "?times=" + Date.now();
            $.getJSON(url, function (baseuser) {
                if (baseuser)
                {
                    $("#F_Account").val(baseuser.F_Account);
                    $("#F_RealName").val(baseuser.F_RealName);
                    $("#F_MobilePhone").val(baseuser.F_MobilePhone);
                    $("#F_IdAddress").val(baseuser.F_IdAddress);
                    $("#F_AccountName").val(baseuser.F_AccountName);
                    $("#F_BankAccount").val(baseuser.F_BankAccount);
                    $("#F_Bank").val(baseuser.F_Bank);
                    $("#F_BankAddre").val(baseuser.F_BankAddre);
                    $("#F_Address").val(baseuser.F_Address);
                    var $Prov = $("#F_Province").select2();
                    var $Cit = $("#F_City").select2();
                    var $Ar = $("#F_Area").select2();
                    $Prov.val(baseuser.F_Province).trigger("change");
                    $Cit.val(baseuser.F_City).trigger("change");
                    $Ar.val(baseuser.F_Area).trigger("change");
                    //$("#F_Province").select2('val', baseuser.F_Province);
                    //baseuser.
                }
            });
        });
    });

</script>
<form id="form1">
    <div class="widget-body">
        <div id="wizard" class="wizard" data-target="#wizard-steps" style="border-left: none; border-top: none; border-right: none;">
            @*<ul class="nav nav-tabs">
                    <li class="active"><a href="#"></a></li>
                </ul>*@
            <div class="user-box">
                <span class="name" style="font-weight:bold;">
                    您好,@NFine.Code.OperatorProvider.Provider.GetCurrent().UserName！您的账户余额还有;
                </span><span class="name" style="font-weight:bold;color:red;">【@ViewBag.MemberMoney】</span><span class="name" style="font-weight:bold;">,提示：收货人默认为银行开户名，请确认注册的账号开户名和收货地址信息完整</span>
            </div>
            <ul class="steps">
                <li data-target="#step-1" class="active"><span class="step">1</span>新建会员<span class="chevron"></span></li>
                <li data-target="#step-2"><span class="step">2</span>会员购物<span class="chevron"></span></li>
            </ul>
        </div>
        <div class="step-content" id="wizard-steps" style="border-left: none; border-bottom: none; border-right: none;">
            <div class="step-pane active" id="step-1" style="margin: 10px; margin-bottom: 0px;">
                <div class="panel panel-default">
                    <div class="panel-body" style="width: 98%;">
                        <table class="form">
                            <tr>
                                <th class="formTitle">会员ID</th>
                                <td class="formValue">
                                    <input id="F_Account" name="F_Account" type="text" class="form-control required" placeholder=" 请输入正确格式的会员ID号,数字加字母组合并且是6位数" />
                                </td>
                                <th class="formTitle">会员姓名</th>
                                <td class="formValue">
                                    <input id="F_RealName" name="F_RealName" type="text" class="form-control required" placeholder=" 请认真填写姓名，一但注册成功后不可修改" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">身份证号码</th>
                                <td class="formValue">
                                    <input id="F_CardId" name="F_CardId" type="text" class="form-control required" placeholder="请输入身份证号" />
                                </td>
                                <th class="formTitle">联系方式</th>
                                <td class="formValue">
                                    <input id="F_MobilePhone" name="F_MobilePhone" type="text" class="form-control required" placeholder="请输入联系方式,会员常用的联系方式" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">身份地址</th>
                                <td class="formValue" colspan="3">
                                    <div style="width:100%;float:left;display:inline;">
                                        <div style="width:20%;float:left;display:inline;">
                                            <select id="F_Province" name="F_Province" style="width:24%;float:left;display:inline;"></select>
                                        </div>
                                        <div style="width:3%;float:left;display:inline;">&nbsp;&nbsp;&nbsp;</div>
                                        <div style="width:20%;float:left;display:inline;"><select id="F_City" name="F_City" form="form-control"></select></div>
                                        <div style="width:3%;float:left;display:inline;">&nbsp;&nbsp;&nbsp;</div>
                                        <div style="width:20%;float:left;display:inline;"><select id="F_Area" name="F_Area" form="form-control"></select></div>
                                        <div style="width:3%;float:left;display:inline;">&nbsp;&nbsp;&nbsp;</div>
                                        <div style="width:31%;float:left;display:inline;"><input id="F_IdAddress" name="F_IdAddress" type="text" class="form-control" /></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">登录密码</th>
                                <td class="formValue">
                                    <input id="F_UserPassword" name="F_UserPassword" type="password" class="form-control required" placeholder="请输入登录密码,不区分大小写,长度（6-9位）,必须包含字母和数字" />
                                </td>
                                <th class="formTitle">密码确认</th>
                                <td class="formValue">
                                    <input id="F_UserPassword1" name="F_UserPassword1" type="password" class="form-control required" placeholder="请输入密码确认" />
                                </td>
                            </tr>
                            <tr style="display:none;" >
                                <th class="formTitle">交易密码</th>
                                <td class="formValue">
                                    <input id="F_SecPassword" name="F_SecPassword" type="password" class="form-control required" placeholder="请输入二级密码,不区分大小写,长度（6-9位）,必须包含字母和数字" />
                                </td>
                                <th class="formTitle">密码确认</th>
                                <td class="formValue">
                                    <input id="F_SecPassword1" name="F_SecPassword1" type="password" class="form-control required" placeholder="请输入二级密码确认" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">银行开户名</th>
                                <td class="formValue">
                                    <input id="F_AccountName" name="F_AccountName" type="text" class="form-control required" placeholder="请输入银行开户名,开户名必须跟身份证上姓名一致，提交后不可修改，请慎重填写" />
                                </td>
                                <th class="formTitle">银行帐号</th>
                                <td class="formValue">
                                    <input id="F_BankAccount" name="F_BankAccount" type="text" class="form-control required" placeholder="请输入银行帐号,使用存折号无效 只能是建行农行工行" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">开户银行</th>
                                <td class="formValue">
                                    <input id="F_Bank" name="F_Bank" type="text" class="form-control required" placeholder="请输入开户银行" />
                                </td>
                                <th class="formTitle">开户所在省市</th>
                                <td class="formValue">
                                    <input id="F_BankAddre" name="F_BankAddre" type="text" class="form-control required" placeholder="请输入开户所在省市" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">收货地址</th>
                                <td class="formValue">
                                    <input id="F_Address" name="F_Address" type="text" class="form-control required" placeholder="请输入收货地址" />
                                </td>
                                <th class="formTitle">代理</th>
                                <td class="formValue">
                                    <select id="ProxyType" name="ProxyType" class="form-control">
                                        @*<option value="0">不是代理</option>
                                            <option value="1">省代理</option>
                                            <option value="2">市代理</option>
                                            <option value="3">区县代理</option>*@
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle">代理地区</th>
                                <td class="formValue" colspan="3">
                                    <div style="width:100%;float:left;display:inline;">
                                        <div style="width:31%;float:left;display:inline;">
                                            <select id="F_Province1" name="F_Province1" style="width:24%;float:left;display:inline;"></select>
                                        </div>
                                        <div style="width:3%;float:left;display:inline;">&nbsp;&nbsp;&nbsp;</div>
                                        <div style="width:31%;float:left;display:inline;"><select id="F_City1" name="F_City1" form="form-control"></select></div>
                                        <div style="width:3%;float:left;display:inline;">&nbsp;&nbsp;&nbsp;</div>
                                        <div style="width:31%;float:left;display:inline;"><select id="F_Area1" name="F_Area1" form="form-control"></select></div>
                                    </div>
                                    <input type="hidden" id="ProxyCode" />
                                </td>
                            </tr>
                            <tr>
                                <th class="formTitle" valign="top" style="padding-top: 5px;">
                                    备注
                                </th>
                                <td class="formValue" colspan="3">
                                    <input id="F_Description" name="F_Description" class="form-control" />
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="step-pane" id="step-2">
                <div class="gridPanel">
                    <table id="gridList"></table>
                </div>
            </div>
        </div>
        @*<div id="wizard-actions" style="padding: 0px;height: 40px;line-height: 36px;text-align: right;border-top: 1px solid #ddd;background-color: #eee;position: absolute;top: 100%;margin-top: -30px;width: 100%;padding-right: 6px;">*@
        <div id="wizard-actions" style="height: 40px;line-height: 36px;text-align: right;border-top: 1px solid #ddd;background-color: #eee;width: 100%;padding-right: 6px;">
            <a id="btn_last" disabled class="btn btn-primary btn-prev">上一步</a>
            <a id="btn_next" class="btn btn-primary btn-next">下一步</a>
            <a id="btn_finish" class="btn btn-primary" style="display: none;" onclick="submitForm()">完成</a>
        </div>
    </div>
</form>

